コンピュータグラフィックスでは、 ベクタ と ビットマップ グラフィックスの違いを明確にします。ベクタグラフィックス（例：SVG）は論理的な形状によって画像を表現し、すべての要素がDOM内に永続的に存在します。一方、ビットマップグラフィックス（例：HTML5 Canvas）は 色の点のラスタで構成されます。

1. Canvasへの移行

SVGはCSSでスタイル設定しやすいですが、ブラウザはすべてのノードを追跡しなければなりません。高パフォーマンスが必要な用途、たとえば数千個の動きのあるパーツを持つゲームでは、Canvas APIが優れています。これは描画領域をカプセル化する単一のDOM要素を提供し、実質的に「白紙のキャンバス」のようなものです。

2. 描画コンテキスト

「 <canvas> 」要素は、その コンテキストを初期化するまでは「ブラックボックス」です。このオブジェクトのメソッドが実際に描画を行うインターフェースを提供し、表示要素とレンダリングロジックを分離します。

3. ネームスペースの理解

SVGなどのXMLベースのグラフィックスでは、 xmlns="http://www.w3.org/2000/svg" 属性は重要です。これはブラウザに標準的なHTML解析から特定のグラフィックススキーマへの切り替えを通知し、形状タグがインタラクティブなオブジェクトとして認識されるようにします。